import React, { useState, useEffect } from 'react';
import { Form, Input, Radio, Button, message } from 'antd';
import { SaveOutlined, ReloadOutlined } from '@ant-design/icons';

interface UserData {
  id: number;
  username: string;
  nickname: string;
  email: string;
  mobile: string;
  avatar?: string;
  sex?: number;
  dept?: {
    name: string;
  };
  posts?: Array<{ name: string }>;
  roles?: Array<{ name: string }>;
  createTime: string;
}

interface BasicInfoProps {
  userInfo: UserData;
  onUpdate: (updatedInfo: Partial<UserData>) => void;
}

const BasicInfo: React.FC<BasicInfoProps> = ({ userInfo, onUpdate }) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    // 初始化表单数据
    form.setFieldsValue({
      nickname: userInfo.nickname,
      email: userInfo.email,
      mobile: userInfo.mobile,
      sex: userInfo.sex || 1
    });
  }, [userInfo, form]);

  const handleSubmit = async (values: any) => {
    setLoading(true);
    try {
      // 模拟API调用
      await new Promise(resolve => setTimeout(resolve, 1000));
      
      // 更新用户信息
      onUpdate(values);
      message.success('基本信息更新成功');
    } catch (error) {
      message.error('更新失败，请重试');
    } finally {
      setLoading(false);
    }
  };

  const handleReset = () => {
    form.setFieldsValue({
      nickname: userInfo.nickname,
      email: userInfo.email,
      mobile: userInfo.mobile,
      sex: userInfo.sex || 1
    });
    message.info('表单已重置');
  };

  return (
    <div className="basic-info-container">
      <Form
        form={form}
        layout="vertical"
        onFinish={handleSubmit}
        autoComplete="off"
      >
        <Form.Item
          label="昵称"
          name="nickname"
          rules={[
            { required: true, message: '请输入昵称' },
            { min: 2, max: 20, message: '昵称长度为2-20个字符' }
          ]}
        >
          <Input placeholder="请输入昵称" />
        </Form.Item>

        <Form.Item
          label="邮箱"
          name="email"
          rules={[
            { required: true, message: '请输入邮箱' },
            { type: 'email', message: '请输入正确的邮箱格式' }
          ]}
        >
          <Input placeholder="请输入邮箱" />
        </Form.Item>

        <Form.Item
          label="手机号"
          name="mobile"
          rules={[
            { required: true, message: '请输入手机号' },
            { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式' }
          ]}
        >
          <Input placeholder="请输入手机号" />
        </Form.Item>

        <Form.Item
          label="性别"
          name="sex"
          rules={[{ required: true, message: '请选择性别' }]}
        >
          <Radio.Group>
            <Radio value={1}>男</Radio>
            <Radio value={2}>女</Radio>
          </Radio.Group>
        </Form.Item>

        <Form.Item className="form-actions">
          <Button
            type="primary"
            htmlType="submit"
            loading={loading}
            icon={<SaveOutlined />}
            style={{ marginRight: 16 }}
          >
            保存
          </Button>
          <Button
            type="default"
            onClick={handleReset}
            icon={<ReloadOutlined />}
          >
            重置
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default BasicInfo;